// 使用onTouchStar tonTouchMove onTouchEnd 来模拟移动端的touch事件
import React, { Component } from 'react'

export default class TouchDemo extends Component {
  touchStart = (e) => {
    let finger = e.changedTouches[0]; // 记录了操作手指的相关信息
    this.touch = {
      startX: finger.pageX,
      startY: finger.pageY,
      isMove: false
    }
  }
  // 手指移动： 记录手指偏移值，和误差作对比，分析出是否发生移动
  touchMove = (e) => {
    let finger = e.changedTouches[0];
    let {startX, startY} = this.touch;
    let changeX = finger.pageX - startX;
    let changeY = finger.pageY - startY;
    if(Math.abs(changeX) > 10 || Math.abs(changeY) > 10) {
      this.touch.isMove = true;
    }
  }
  // 手指离开： 根据isMove的值，判断是否发生了移动
  touchEnd = (e) => {
    let { isMove } = this.touch;
    if(!this.touch.isMove) {
      console.log('双击');
    }
  }
  render() {
    return (
      <>
      <h2>TouchDemo</h2>
      <button onTouchStart={this.touchStart} onTouchMove={this.touchMove} onTouchEnd={this.touchEnd}>双击</button>
      </>
      

    )
  }
}

